1.common.js
var Dpr = 1, uAgent = window.navigator.userAgent;var isIOS = uAgent.match(/iphone/i);var isYIXIN = uAgent.match(/yixin/i);var is2345 = uAgent.match(/Mb2345/i);var ishaosou = uAgent.match(/mso_app/i);var isSogou = uAgent.match(/sogoumobilebrowser/ig);var isLiebao = uAgent.match(/liebaofast/i);var isGnbr = uAgent.match(/GNBR/i);function resizeRoot() { var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize; var wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight; if (window.devicePixelRatio) { wDpr = window.devicePixelRatio; } else { wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1; } if (isIOS) { wWidth = screen.width; wHeight = screen.height; } // if(window.orientation==90||window.orientation==-90){ // wWidth = wHeight; // }else if((window.orientation==180||window.orientation==0)){ // } if (wWidth > wHeight) { wWidth = wHeight; } wFsize = wWidth > 1080 ? 144 : wWidth / 7.5; wFsize = wFsize > 32 ? wFsize : 32; window.screenWidth_ = wWidth; if (isYIXIN || is2345 || ishaosou || isSogou || isLiebao || isGnbr) {//YIXIN 和 2345 这里有个刚调用系统浏览器时候的bug,需要一点延迟来获取 setTimeout(function () { wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth; wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight; wFsize = wWidth > 1080 ? 144 : wWidth / 7.5; wFsize = wFsize > 32 ? wFsize : 32; // document.getElementsByTagName('html')[0].dataset.dpr = wDpr; document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px'; }, 500); } else { // document.getElementsByTagName('html')[0].dataset.dpr = wDpr; document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px'; } // alert("fz="+wFsize+";dpr="+window.devicePixelRatio+";UA="+uAgent+";width="+wWidth+";sw="+screen.width+";wiw="+window.innerWidth+";wsw="+window.screen.width+window.screen.availWidth);}resizeRoot();var commonObj = { ajaxUrl: "", //模糊搜索url moreUrl: "", //下拉分页更多的url searchUrl: "", ajaxstatus: true, fenyestatus: true, pageData: {}, //下拉分页传输的data appendId: "", //下拉分页append的父级ID mohuSearch: function () { var _this = this; //搜索弹框 $(".opensearchbar").on("touchend", function () { $("body").css({height: "100%", overflow: "hidden"}); $(".searchdialog").show(); $("#m_searchinput").focus(); }) //搜索关闭 $(".l_backbtn").on("click", function () { $("body").removeAttr("style"); $(this).parent().hide(); //搜索清空逻辑 $("#m_searchinput").val("").blur(); }) //搜索按钮 $(".searchdialog").on("click", ".mh_searchbtn", function () { var keyword = $.trim($("#m_searchinput").val()); //搜索逻辑 window.location.href = commonObj.searchUrl + "?keyword=" + keyword; }) if (document.getElementById('m_searchinput')) { //搜索匹配 document.getElementById('m_searchinput').addEventListener('input', function (e) { var keyword = e.target.value; var searchResult = []; if ($.trim(keyword) != "") { $.ajax({ url: _this.ajaxUrl, type: "post", data: {keyword: keyword}, dataType: "json", success: function (res) { var dataLength = res.data.data.length; if (dataLength > 0) { for (var i = 0; i < dataLength; i++) { searchResult[i] = '' + '' + res.data.data[i].keyword + '' + ''; } $("#showmohulist").html(searchResult.join("")).show(); } else { $("#showmohulist").hide(); } } }) } else { $("#showmohulist").html("").show(); } }); } }, scrollNextPage: function () { var _this = this; // $(window).scroll(_this.scrollFn); $(window).on("touchmove", _this.scrollFn); }, scrollFn: function () { var clientHeight = $(window).height(); var wholeHeight = $(document).height(); var scrollTopHeight = $(window).scrollTop(); if (clientHeight + scrollTopHeight + 50 >= wholeHeight && commonObj.ajaxstatus) { if (commonObj.fenyestatus) { commonObj.ajaxstatus = false; $(".loaddiv").show(); $.ajax({ url: commonObj.moreUrl, type: "post", dataType: "json", data: commonObj.pageData, success: function (res) { commonObj.searchCallBack(res); } }) } else { return } } }, searchCallBack: function (obj) { }}
2.引用js
//下滑分页 var listObj = { pagenumber: 2, sDfsview: ' ', initList: function () { commonObj.moreUrl = "/web/interchange/index";//设置下拉分页url commonObj.appendId = "goods_list"; //下滑分页数据 commonObj.pageData = { page: listObj.pagenumber, t: true }; //下滑分页回调函数 commonObj.searchCallBack = function (res) { console.log(res.data); console.log('hello'); $(".loaddiv").hide(); var dataLength = res.data.length; console.log(dataLength); if (dataLength > 0) { listObj.pagenumber++; commonObj.ajaxstatus = true; commonObj.pageData.page = listObj.pagenumber; var htmlArray = []; for (var i = 0; i < dataLength; i++) { htmlArray[i] = '' +' ' +''; } $("#" + commonObj.appendId).append(htmlArray.join("")); } else { commonObj.fenyestatus = false } }; //下滑分页触发 commonObj.scrollNextPage(); } }; $(listObj.initList)' +'' +''+res.data[i].sGoodsName+'
' +''+res.data[i].sGoodDsc+'
' +'' +'' +'' +'' +''+res.data[i].sStock+'' +'立即兑换' +'
3.原理
js ajax封装 及时调,及时渲染